<template>
  <div class="setting">
    <template v-if="tabType == 'data'">
      <div class="card">
        <div class="title">标题设置</div>
        <div class="content">
          <el-form-item label="标题">
            <dc-text-color
              v-model="settingData.data.title"
              placeholder="请输入标题"
              maxlength="5"
              show-word-limit
            ></dc-text-color>
          </el-form-item>
        </div>
        <dc-list
          v-model="settingData.data.list"
		  leng="3"
          :itemProp="{
            src: '',
            url: '',
            isMp: 1,
            mp: {
              path: '',
              appid: '',
              id: '',
            },
            title: {
              text: '',
              color: '#000',
            },
            subtitle: {
              text: '',
              color: '#999',
            },
          }"
        >
          <template #title>平台设置</template>
          <template #listItem="{ element }">
            <el-form-item label="图标">
              <div class="sa-flex">
                <sa-uploader v-model="element.src" fileType="image"></sa-uploader>
                <div class="tip">建议尺寸：98*98</div>
              </div>
            </el-form-item>
            <el-form-item label="标题">
              <dc-text-color
                v-model="element.title"
                placeholder="请输入标题"
                maxlength="5"
                show-word-limit
              ></dc-text-color>
            </el-form-item>
			<el-form-item label="副标题">
              <dc-text-color
                v-model="element.subtitle"
                placeholder="请输入副标题"
                maxlength="8"
                show-word-limit
              ></dc-text-color>
            </el-form-item>
            <template v-if="element.isMp == 1">
              <el-form-item label="小程序路径">
                <el-input v-model="element.mp.path" placeholder="请输入小程序路径"></el-input>
              </el-form-item>
              <el-form-item label="小程序appid">
                <el-input v-model="element.mp.appid" placeholder="请输入小程序appid"></el-input>
              </el-form-item>
              <!-- <el-form-item label="小程序原始ID">
                <el-input v-model="element.mp.id" placeholder="请输入小程序原始ID"></el-input>
              </el-form-item> -->
            </template>
            <el-form-item v-else label="链接">
              <dc-url v-model="element.url"></dc-url>
            </el-form-item>
            <el-form-item label="小程序">
              <el-switch v-model="element.isMp" :active-value="1" :inactive-value="0" />
            </el-form-item>
          </template>
        </dc-list>
      </div>
    </template>
  </div>
</template>

<script setup>
  import dcList from '../../common/dc-list.vue';
  import dcUrl from '../../common/dc-url.vue';
  import dcTextColor from '../../common/dc-text-color.vue';
  const props = defineProps(['settingData', 'tabType']);
</script>
